﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridLayout">
    <CodeSnippetTabPage Text="Razor">@(@"<DxGridLayout CssClass=""mw-1100"" style=""height:500px"">
    <Rows>
        <DxGridLayoutRow Height=""100px"" />
        <DxGridLayoutRow />
        <DxGridLayoutRow Height=""auto"" />
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width=""2fr""/>
        <DxGridLayoutColumn Width=""60%"" />
        <DxGridLayoutColumn />
    </Columns>
    <Items>
        <DxGridLayoutItem Row=""0"" Column=""0"" ColumnSpan=""3"">
            <Template>
                <div class=""gridlayout-header gridlayout-item"">
                    Header
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row=""1"" Column=""1"">
            <Template>
                <div class=""gridlayout-content gridlayout-item"">
                    Content
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row=""1"" Column=""0"">
            <Template>
                <div class=""gridlayout-left-side-bar gridlayout-item"">
                    Left Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row=""1"" Column=""2"">
            <Template>
                <div class=""gridlayout-right-side-bar gridlayout-item"">
                    Right Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row=""2"" Column=""0"" ColumnSpan=""3"">
            <Template>
                <div class=""gridlayout-footer gridlayout-item"">
                    Footer
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>
")
    </CodeSnippetTabPage>
</CodeSnippetTabbed>
